<template>
  <div class="wh" style="">
    <div
      class="wh"
      v-if="true"
      style="display: flex; flex-wrap: wrap; align-content: flex-start"
    >
      <!-- 点位 -->
      <div style="width: 100%; padding: 0px 10px">
        <n-alert title="" type="info"> 点击左键开始绘制；shift加右键结束绘制。 </n-alert>
      </div>
      <div class="fr" style="width: 100%">
        <div style="width: 60px; padding-top: 0px; text-align: right">点：</div>
        <div
          style="width: 85%; display: flex; flex-wrap: wrap; align-content: flex-start"
        >
          <div>
            <div
              :style="{ backgroundColor: '' }"
              class="tianqiitemclass"
              @click="creatPlot(pin)"
              title=""
            >
              <!-- <icon-tool :style="{ fontSize: '28px' }" /> -->
              <img
                :src="'/assets/fenxi/dianwei.png'"
                alt=""
                style="width: 30px; filter: invert(100%) brightness(100%)"
              />
            </div>
            <div style="text-align: center; width: 60px; line-height: 14px">
              {{ "点" }}
            </div>
          </div>
        </div>
      </div>
      <div class="fr" style="width: 100%">
        <div style="width: 60px; padding-top: 0px; text-align: right">线：</div>
        <div
          style="width: 85%; display: flex; flex-wrap: wrap; align-content: flex-start"
        >
          <div v-for="item in linelist.symbols.rows">
            <div
              :style="{ backgroundColor: '' }"
              class="tianqiitemclass"
              @click="creatPlot(item)"
            >
              <img :src="item.thumbnail" alt="" style="filter: opacity(70%)" />
            </div>
            <div style="text-align: center; width: 60px; line-height: 14px">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="fr" style="width: 100%">
        <div style="width: 60px; padding-top: 0px; text-align: right">面：</div>
        <div
          style="width: 85%; display: flex; flex-wrap: wrap; align-content: flex-start"
        >
          <div v-for="item in polygonlist.symbols.rows">
            <div
              :style="{ backgroundColor: '' }"
              class="tianqiitemclass"
              @click="creatPlot(item)"
            >
              <img :src="item.thumbnail" alt="" style="filter: opacity(70%)" />
            </div>
            <div style="text-align: center; width: 60px; line-height: 14px">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="fr" style="width: 100%">
        <div style="width: 60px; padding-top: 0px; text-align: right">操作：</div>
        <div
          style="width: 85%; display: flex; flex-wrap: wrap; align-content: flex-start"
        >
          <!-- 清空 -->
          <div
            :style="{ backgroundColor: '' }"
            class="tianqiitemclass"
            @click="qingkongclick()"
            title="清空"
          >
            <!-- <icon-tool :style="{ fontSize: '28px' }" /> -->
            <img
              :src="'/assets/fenxi/qingkong.png'"
              alt=""
              style="width: 20px; filter: invert(100%) brightness(550%)"
            />
          </div>
          <!-- 清空 -->
          <div
            :style="{ backgroundColor: '' }"
            class="tianqiitemclass"
            @click="saveclick()"
            title="保存"
          >
            <!-- <icon-tool :style="{ fontSize: '28px' }" /> -->
            <img
              :src="'/assets/fenxi/save.png'"
              alt=""
              style="width: 20px; filter: invert(100%) brightness(550%)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import ToolItem from '@/components/map/tools/ToolItem.vue'

import { ElMessage, ElMessageBox } from "element-plus";

import xian from "./xian.js";
import mian from "./mian.js";

import { v1 } from "uuid";

import _ from "lodash";

import { useMessage } from "naive-ui";

let pickEntity = null;
export default {
  name: "",
  components: {
    // ToolItem,
  },
  data() {
    return {
      linelist: xian,
      polygonlist: mian,
      creating: true,
      pin: { content: '{"czmObject":{"name":"Pin1","xbsjType":"Pin"}}' },
      messageReactive: null,
    };
  },
  computed: {},
  watch: {},
  mounted() {
    let haslayer = false;
    earth.sceneTree.root.children.map((item) => {
      if (_.has(item, "title") && item["title"] == "标绘分组") {
        haslayer = true;
      }
    });
    if (!haslayer) {
      earth.sceneTree.root.children.push({
        title: "标会分组",
        ref: "plotref",
        children: [],
      });
    }
    // 添加提示
    // const message = useMessage();
    // if (!this.messageReactive) {
    //   this.messageReactive = message.info("点击左键开始绘制；shift加右键结束绘制。", {
    //     duration: 10000
    //   });
    //   this.messageReactive.destroy()
    //   // this.messageReactive = null;
    //   console.log(this.messageReactive);
    // }
  },
  beforeDestroy() {
    earth.sceneTree.$refs.plotref.children.map((item) => {
      item.destroy();
    });
    // if (this.messageReactive) {
    //   this.messageReactive.destroy();
    //   this.messageReactive = null;
    // }
  },
  methods: {
    resetList() {},
    saveclick() {
      console.log(earth.sceneTree.$refs.plotref);
      let earthjson = earth.toJSON();
      earthjson.sceneTree.root.children.map((item) => {
        if (item.title == "标绘分组") {
          console.log(item.children);
        }
      });
    },
    creatPlot(item) {
      if (this.symbol && this.symbol.czmObject.creating) {
        // 新创建的，没确定之前，又选择了其他图标
        this.symbol.czmObject.destroy();
      }
      var json = JSON.parse(item.content);
      // 设置名字
      let uuid = v1();
      if (json.czmObject) {
        json.ref = uuid;
      }
      earth.sceneTree.$refs.plotref.children.push(json);
      this.symbol = earth.sceneTree.$refs[uuid];
      this.symbol.czmObject.isCreating = true;
      this.symbol.czmObject.creating = true;

      // 判断是否为pin 并监听事件

      this._uw2 = XE.MVVM.watch(this.symbol.czmObject, "creating", () => {
        if (!this.symbol.czmObject.creating && this.symbol.czmObject.xbsjType == 'Pin') {
          // this.
          console.log(111111);

          ElMessageBox.prompt("请输入描述", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputErrorMessage: "",
          })
            .then(({ value }) => {

              this.symbol.czmObject.pinBuilder.extText = value
              this.symbol.czmObject.pinBuilder.makiIcon = 'airport'

            })
            .catch(() => {
              ElMessage({
                type: "info",
                message: "已取消",
              });
            });
        }
      });
    },
    qingkongclick() {
      this.closewindow();
    },
    closewindow() {
      earth.sceneTree.$refs.plotref.children.map((item) => {
        item.destroy();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wh {
  width: 100%;
  height: 100%;
}

.tianqiitemclass {
  border: 1px solid #fff9;
  border-radius: 5px;
  margin: 5px;
  cursor: pointer;
  // border-radius: 6px 6px 6px 6px;
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  align-items: center;

  &:hover {
    background-color: #068cc088;
  }
}

.zhjx-iconfont {
  font-size: 25px !important;
}
</style>
